﻿<template>
  <div>
    <query-pan @query-change="onQueryCondidateChange"></query-pan>
    <button-bar :page="page" @onadd="onAdd" @current-change="onCurrentChange"></button-bar>
    <table-pan ref="tablist" @page="onPageChange" @onedit="onEdit" ></table-pan>
    <dlg-edit ref="dlgedit" @onRefresh="onRefresh"></dlg-edit>
  </div>
</template>

<script>
import queryPan from './c_query';
import buttonBar from './c_bntbar';
import tablePan from './c_table';
import dlgEdit from './dlg_update';

export default {
  components: {
    queryPan,
    buttonBar,
    tablePan,
    dlgEdit,
  },
  data() {
    return {
      page: {
        total: 0,
        size: 0,
        index: 0
      }
    };
  },
  created() {},
  methods: {
    //====查询面板的事件====================================================
    onQueryCondidateChange(qc) {
      this.$refs['tablist'].Query(qc);
    },
    //====按钮条的事件======================================================
    onAdd(type) {
      this.$refs['dlgedit'].AddDialog(type);
    },
    //-----------------------------------------------------------
    onCurrentChange(currentPage) {
      this.$refs['tablist'].onCurrentChange(currentPage);
    },
    onPageChange(page) {
      this.page = page;
    },
    onEdit(id) {
      this.$refs['dlgedit'].EditDialog(id);
    },
    onRefresh() {
      this.$refs.tablist.GetList();
    }
  }
};
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.iconsize {
  font-size: 16px;
}
</style>
